<template>
  <div class="batchSelectionImages">
    <h3>批量选择图片</h3>
    <div class="imgs">
      <div
        class="imgs_item"
        v-for="item in list"
        :key="item.imgUrl"
        @click="item.selected = !item.selected"
      >
        <img :src="item.imgUrl" alt="" />
        <i v-if="item.selected" class="el-icon-success"></i>
      </div>
    </div>
    <h3>选中的数据：{{ list.filter((f) => f.selected) }}</h3>
  </div>
</template>
<script>
export default {
  name: 'batchSelectionImages',
  data() {
    return {
      list: [
        {
          imgUrl:
            'https://img1.baidu.com/it/u=1965663592,580944689&fm=253&fmt=auto&app=120&f=JPEG?w=917&h=500',
          selected: false,
        },
        {
          imgUrl: 'https://photo.16pic.com/00/75/74/16pic_7574368_b.jpg',
          selected: false,
        },
        {
          imgUrl:
            'https://img1.baidu.com/it/u=2833240280,2198243692&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500',
          selected: false,
        },
        {
          imgUrl:
            'https://inews.gtimg.com/om_bt/OlegioDYjvpy63qO7jZ2KjSHuRv68eNlxkY0dSLPC-udwAA/1000',
          selected: false,
        },
      ],
    }
  },
}
</script>
<style lang="less" scoped>
.imgs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  &_item {
    width: 200px;
    height: 200px;
    position: relative;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    i {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 20px;
      color: red;
    }
  }
  
}
</style>
